<template lang="html">
<div id="course_detail" v-if="course_detail !== null">
    <!--课程的视频-->
    <div class="video">
        <video :style="'background-image: url('+$qiniu.url+'assets/img/playvideo1.jpg)'" loop id="video" @click="pause">
            <source :src="course_detail.video">
        </video>
        <div class="start" @click="start" id="start">
            <img :src="$qiniu.url+'assets/img/play.png'" alt="" v-if="this.isAndroid()">
        </div>
    </div>
  <!--课程详情-->
    <section class="box">
      <div class="title">{{course_detail.name}}</div>
      <div class="wrapper">
        <div class="profile">
          <div class="list">
            <div>时长：{{ parseInt(course_detail.time/60) }}分钟</div>
            <div>动作难度： <span v-if = "course_detail.grade <= 3">初级</span>
                           <span v-else-if = "course_detail.grade > 3 && course_detail.grade <= 6">中级</span>
                           <span v-else>高级</span>
            </div>
          </div>
          <div class="list">
            <div>部位：{{course_detail.part}}</div>
            <!--<div>价格：{{course_detail.price}}元</div>-->
          </div>
        </div>
    </div>
    </section>
    <!--课程简介-->
    <section class="box">
        <div class="title">课程简介</div>
        <p class="content">{{course_detail.description}}</p>
    </section>
    <!--添加课程按钮-->
    <div v-if="judgeBtn" class="addbtn"  :id='course_detail.id'>
        <span class="plan" id="plus"  @click="judge(course_detail.id,self_course,getUserInfo,$route.query.date,current_plan_courses)">添加课程</span>
    </div>
    <!--成功添加按钮的框-->
    <div id="success" class="success" >
      <span class="deltips">恭喜您添加成功！</span>
      <span class="successbtn" @click="success()">确认</span>
    </div>

    <!--各类的toolTips框-->
    <ToolTip :select='select'  v-on:plus = 'plus' v-on:hide='hide'></ToolTip>
    <Loading v-if="LoadingShow"></Loading>
    <!--全屏的遮罩-->
    <div class="modelwrapper"></div>
    </div>
</template>

<script>
    import Loading from '../loading';
    import ToolTip from '../common/tooltips.vue';
    import api from '../../api';
    import {
        refreshTitle
    } from "../../tools.js"

    export default {
        components: {
            Loading,
            ToolTip,
        },
        data() {
            return {
                current_plan_courses: null,
                course_detail: null,
                select: null,
            }
        },

        created() {
            refreshTitle(this.$route.meta.title);
            var date = this.$route.query.date;
            var that = this;
            this.$store.dispatch('GET_SELF_COURSR', date);
            this.$store.dispatch('GET_USER_INFO');
            // 获取课程详情
            api.getCourseDetail(this.$route.params.id).then(response => {
                if (response.status == 200) {
                    if (response.data.code == 101) {
                        that.course_detail == null
                    } else {
                        that.course_detail = response.data;
                    }
                }
            })

            // 拉取当前计划
            api.getPlaneCourse(date).then(function(result) {
                if (result.data.code == 100) {
                    that.current_plan_courses = result.data.result;
                } else if (result.data.code == 103) {
                    that.current_plan_courses = result.data.result;
                } else {
                    that.current_plan_courses = result.data.result;
                }
                // that.$store.dispatch('HIDDEN_LOADING_SHOW');
            });


        },
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            // 自选课程的信息
            self_course() {
                return this.$store.state.course.self_course
            },
            // 用户信息
            getUserInfo() {
                return this.$store.state.user
            },
            addShow() {
                if (this.$route.query.name == 'plan_detail') {
                    return false;
                } else {
                    return true;
                }
            },
            judgeBtn() {
                return this.$route.query.flagaddBtn;
            }

        },
        methods: {
            //添加课程
            plus() {
                var id = document.querySelector(".addbtn").getAttribute("id");
                var date = this.$route.query.date;
                var self = this;
                api.plusCourse(id, date).then(response => {
                    if (response.status == 200) {
                        // 显示添加成功的toast
                        document.getElementById('success').style.display = "block";
                        self.select = null;
                    }
                })
            },
            // 跳转个人信息引导页
            write() {
                var that = this;
                that.$router.push('/user/gender');
            },
            // 判断是否可选课程，禁用点击
            judge(id, self, info, date, courses) {
                // 一旦点击鼠标事件禁用，4s后解禁
                document.querySelector(".modelwrapper").style.display = "block"; // 显示一个全屏的遮罩
                var btn = document.getElementById('plus');
                btn.style.pointerEvents = "none";
                var that = this;
                setTimeout(() => {
                        btn.style.pointerEvents = "auto";
                    }, 3000)
                    //判断是否有可选课程
                if (self.message !== '今日没有可选课程') {
                    var existed = self.result.some(function(element) {
                        return id == element.courseid
                    });
                }
                //个人信息不全强制跳转填写页面
                if (info.weight == 0 || info.height == 0 || info.age == 0) {
                    this.select = 'nouserinfo';
                } else {
                    //如果是当前计划的课程，提醒
                    if (courses != null && courses.id == id) {
                        that.select = 'exitplane';
                    } else {
                        // 如果有可选课程，提醒
                        if (existed) {
                            that.select = 'exitself';
                        } else if (existed == null || existed == false) {
                            that.plus(id, date);
                        }
                    }
                }
            },
            hide() {
                document.querySelector(".modelwrapper").style.display = "none";
                this.select = null;
            },
            success() {
                this.$router.go(-1);
            },
            routerBack() {
                this.$router.go(-1);
            },
            isAndroid() {
                if (navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1) {
                    return true;
                } else {
                    return false;
                }
            },
            start() {
                if (this.isAndroid()) {
                    var target = event.target;
                    var video = document.getElementById('video');
                    video.loop = true;
                    video.play();
                    target.style.display = "none";
                } else {
                    return;
                }

            },
            pause() {
                if (this.isAndroid()) {
                    var start = document.getElementById("start");
                    var video = document.getElementById('video');
                    video.pause();
                    start.style.display = "block";
                    return;
                }
            },
            //判断该课程是否在当前计划中,存在返回false，不存在返回true
            current_exist(id, courses) {
                if (courses !== null && courses !== undefined) {
                    var haha = courses.every(function(ele) {
                        return id !== ele.courses[0].id;
                    })
                    return haha
                } else {
                    return true
                }

            }

        },


    }
</script>

<style lang="css">
    #course_detail {
        font-size: 16px;
        background-color: #161616;
        color: #fdb803;
        /*line-height: 2;*/
        width: 100%;
        height: 100%;
        .video {
            position: relative;
            width: 100%;
            height: 100%;
            video {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-repeat: space;
            }
            .start {
                /*width: 100%;
                height: 100%;
                position: relative;*/
                img {
                    width: 60px;
                    height: 60px;
                    position: absolute;
                    left: 50%;
                    top: 35%;
                    -webkit-transform: translate(-50%);
                }
            }
        }
        .box {
            background-color: #161616;
            margin-bottom: 5%;
            padding-left: 6%;
            padding-right: 6%;
            .title {
                border-bottom: 1px solid rgba(253, 184, 1, 0.5);
                font-size: 18px;
                font-weight: 500;
            }
            .wrapper {
                padding-top: 3%;
                .profile {
                    font-size: 14px;
                    position: relative;
                    .list {
                        display: inline-block;
                        .stars {
                            font-size: 0;
                            display: inline-block;
                            .star {
                                display: inline-block;
                                background-size: 40%;
                                background-repeat: no-repeat;
                                /*transform: scale(0.4, 0.4);*/
                                width: 35px;
                                /*height: 30px;*/
                                margin-bottom: -18px;
                                margin-left: -8px;
                                margin-right: -14px;
                            }
                        }
                    }
                    .list:nth-of-type(2) {
                        /*padding-left: 20%;*/
                        height: 20px;
                        position: absolute;
                        top: 0px;
                        left: 60%;
                    }
                }
            }
            .content {
                padding-top: 3%;
                font-size: 14px;
                margin-bottom: 30%;
            }
        }
        .addbtn {
            position: fixed;
            bottom: 50px;
            left: 0;
            width: 100%;
            text-align: center;
            /*font-size: 1rem;*/
            line-height: 2.5rem;
            span {
                display: inline-block;
                padding-top: 0.2rem;
                padding-bottom: 0.2rem;
            }
            .back {
                background-color: #fff;
                width: 15%;
                color: #00BA9B;
            }
            .plan {
                background-color: #fdb803;
                width: 100%;
                color: #161616;
            }
        }
        .success {
            position: fixed;
            z-index: 1005;
            display: none;
            width: 60%;
            padding: 10px 0 15px 0;
            bottom: 42%;
            left: 50%;
            text-align: center;
            /*padding: 10px 20px 20px 10px;*/
            -webkit-transform: translate(-50%);
            border: 1px solid rgba(253, 184, 17, 1)
        }
        .success .deltips {
            font-size: 16px;
            width: 70%;
            line-height: 40px;
            margin-left: 15%;
            text-indent: 4px;
            display: block;
            border-bottom: 1px solid rgba(253, 184, 17, .6);
            margin-bottom: 15px;
        }
        .success .successbtn {
            display: block;
            width: 70%;
            font-size: 16px;
            line-height: 30px;
            background-color: rgba(253, 184, 17, 1);
            color: #161616;
            margin-left: 15%;
        }
        .modelwrapper {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 900;
            background-color: rgba(0, 0, 0, .7);
            display: none;
        }
    }
</style>